<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var socket ;
    //判断浏览器是否支持 websocket 编程

    if(window.WebSocket){
        socket = new WebSocket("ws://localhost:7000/hello")

        //相当于后端的channelRead0方法   ev等于 接收服务器（后端发送的消息）
        socket.onmessage = function (ev) {
           var rt =  document.getElementById('responseText');
            rt.value = rt.value + "\n" + ev.data;
        }


        //相当于链接开启  -- socket通信接通
        socket.onopen = function (ev) {
            var rt =  document.getElementById('responseText');
            rt.value  = "WebSocket链接开启";
        };

        //相当于链接关闭  -- socket通信关闭
        socket.onclose = function (ev) {
            var rt =  document.getElementById('responseText');
            rt.value  = "WebSocket链接关闭"+ "\n" + "链接关闭了";
        };

    }else {
        alert("浏览器不支持WebSocket编程")
    }


    //发送消息到服务器
    function send(mag) {

        //判断链接是否创建成功
        if (!window.socket){
            return;
        }


        if (socket.readyState == WebSocket.OPEN){
            //1. socket.send 调用H5中的socket方法，向后端发送
            //2. 后端Netty接收数据中，我们自定义的处理器的文本帧 TextWebSocketFrame.就等于前端发送的信息格式
            socket.send(mag);

        }else {
            alert("链接未开启")
        }

    }


</script>
        <form onsubmit="return_false">
            <textarea style="height: 300px;width: 300px" name="message"></textarea>
            <input type="button" value="发送" onclick="send(this.form.message.value)">
            <textarea id="responseText" style="height: 300px;width: 300px" ></textarea>
            <input type="button" value="清空" onclick="document.getElementById('responseText').value=''">
        </form>

</body>
</html>